<template>
	<view class="p_bg_all p_b_128">
		<view class="p_lr_32 p_over">
			<view class="main">
				<view class="p_font_28 p_margin_b_48">订单信息</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订单状态</view>
					<view class="p_font_28 p_flex2 p_color_05b570">{{detailInfo.zip?'已打包': '未打包'}}</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订单编号</view>
					<view class="p_font_28 p_flex2">{{detailInfo.order_num}}</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订单金额</view>
					<view class="p_font_28 p_flex2"><text class="p_font_20">¥</text>{{detailInfo.order_price}}</view>
				</view>
			</view>
			<view class="main">
				<view class="p_font_28 p_margin_b_48">订单装订</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">胶装</view>
					<view class="p_font_28 p_flex2">{{detailInfo.glue}}本</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">圈装</view>
					<view class="p_font_28 p_flex2">{{detailInfo.circle}}本</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订书钉</view>
					<view class="p_font_28 p_flex2">{{detailInfo.staple}}本</view>
				</view>
			</view>
			<view class="main">
				<view class="p_flex2">
					<view class="p_font_28">订单内容</view>
					<view class="p_font_24 p_color_7a p_margin_l_16">共{{listData.length}}个文件</view>
				</view>
				<orderContent :item="item" classMargin="p_margin_tb_48" :priceNum="false" :fileNum="true"
					:isPreview="false" previewLocation="right" v-for="item in listData"></orderContent>
			</view>
		</view>
		<bottomView btnText1="已打包" btnText2="未打包" @getSubmit="getSubmit(1)" @getClear="getSubmit(0)">
		</bottomView>
	</view>
</template>

<script>
	import bottomView from '../../components/bottomView.vue';
	import orderContent from '../../components/codeOrder.vue';
	export default {
		components: {
			bottomView,
			orderContent
		},
		data() {
			return {
				expressNum: '',
				detailInfo: {},
				listData: [],
			}
		},
		onLoad(e) {
			this.expressNum = e.express_num;
			this.getScanDetail();
		},
		methods: {
			getScanDetail(e) {
				this.$http.post(this.$api.scanDetail, {
					express_num: this.expressNum
				}, true).then((res) => {
					res.data.circle = res.circle;
					res.data.glue = res.glue;
					res.data.staple = res.staple;
					this.detailInfo = res.data;
					this.listData = res.data.order_detail;
					
					if(e) {
						getApp().getMsg('更新成功', 'success')
					}
				})
			},
			getSubmit(e) {
				if (e == this.detailInfo.zip) {
					getApp().getMsg('当前订单状态已是' + (e == 0 ? '未打包' : e == 1 ? '已打包' : ''))
					return
				}
				
				this.$http.post(this.$api.zip, {
					order_id: this.detailInfo.id,
					zip: e
				}).then((res) => {
					this.getScanDetail(true);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 32rpx;
		margin: 32rpx 0;
		border-radius: 16rpx;
		background-color: #fff;
	}
</style>
